<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-04 16:30:58
-->
<template>
  <a-layout
    class="f-h-100"
    style="overflow: scroll; background-color: #f0f2f7">
    <a-row
      :gutter="[16, 16]"
      class="f-w-100 u-index-box-row"
      style="height: auto; background-color: #f0f2f7">
      <a-col
        :span="18"
        :xl="18"
        :md="24"
        :sm="24"
        :xs="24"
        class="f-h-100">
        <a-layout class="f-h-100">
          <a-layout-header style="height: auto; padding: 0; background-color: #fff; border-radius: 16px">
            <CommonFun />
          </a-layout-header>
          <a-layout-content
            class="f-h-100"
            style="background-color: #f0f2f7">
            <a-row
              :gutter="16"
              class="f-h-100">
              <a-col
                :span="12"
                :xl="12"
                :md="24"
                :sm="24"
                :xs="24">
                <div class="f-flex-column f-w-100 f-h-100">
                  <StayToDo class="f-margin-t16" />

                  <div
                    class="f-margin-t16 s-bg-white"
                    style="position: relative; flex: 1; padding: 0 12px; border-radius: 16px">
                    <DispatchDocStay
                      class="f-h-100"
                      style="position: absolute; width: calc(100% - 12px)" />
                  </div>
                </div>
              </a-col>
              <a-col
                :span="12"
                :xl="12"
                :md="24"
                :sm="24"
                :xs="24">
                <div
                  class="f-flex-column"
                  style="width: 100%; height: 100%; padding-top: 16px">
                  <FocusFirmWarning />
                  <div
                    class="f-margin-t16 s-bg-white"
                    style="position: relative; flex: 1; padding: 0 12px; border-radius: 16px; min-height: 300px">
                    <AdjustS
                      class="f-h-100"
                      style="position: absolute; width: calc(100% - 24px)" />
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-layout-content>
        </a-layout>
      </a-col>
      <a-col
        :span="6"
        :xl="6"
        :md="24"
        :sm="24"
        :xs="24">
        <!-- 风险等级 -->
        <NowWarnLevel />

        <WorkCase />

        <u-card
          title="我的日程"
          class="f-margin-t16">
          <template #extra>
            <a-button
              type="link"
              class="f-padding-0"
              @click="toMoreCalendar">
              更多日程
            </a-button>
          </template>
          <u-calendar-week
            mode="week"
            :modes="['week', 'month']"
            headerEndJustify="space-between"
            :readPoint="true"
            :data="scheduleData"
            :dataProps="{ value: 'scheduledate' }"
            v-model:calendarType="calendarType"
            v-model:date="currentDate" />
          <a-button
            block
            class="f-margin-t12"
            style="background: #ddefff; color: #1890ff"
            ghost
            size="large"
            @click="showAddS = true">
            <template #icon>
              <PlusOutlined />
            </template>
            新增我的日程
          </a-button>
          <div
            style="height: auto; max-height: 300px; overflow: auto"
            class="f-padding-t12 hide-scrolle-bar">
            <ScheduleDetial
              :calendarType="calendarType"
              :date="currentDate"
              ref="scheduleDetial" />
          </div>
        </u-card>
      </a-col>
    </a-row>
  </a-layout>

  <!-- 新增日程 -->
  <AddSchedule
    v-model:open="showAddS"
    width="100%"
    :date="currentDate"
    wrap-class-name="full-modal"
    @close="showAddS = false"
    @success="
      showAddS = false;
      scheduleSuccess();
    " />

  <!-- 详情窗口 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :keyid="keyidEdit" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useLoginStore, useHomeStore } from "@/store";
import { storeToRefs } from "pinia";
import CommonFun from "./components/commonFun/Index.vue";
import DispatchDocStay from "./components/dispatchDoc/Index.vue";
import StayToDo from "./components/stayTodo/Index.vue";
import FocusFirmWarning from "@/views/index/emergencyIndex/component/focusFirmWarning/Index.vue";
import AdjustS from "@/views/index/component/adjust/Index.vue";
import WorkCase from "./components/work/Index.vue";
import ScheduleDetial from "./components/scheduleDetial/Index.vue";
import AddSchedule from "./components/scheduleDetial/AddEchedule.vue";
import dayjs, { Dayjs } from "dayjs";
import { useCalendarSearch } from "@/views/oa/assist/myCalender/hook.ts";
import { numberC } from "@/util/common";
import { addC } from "@/util/computePtrcision.ts";
import { urlFile } from "@/util/common";
import * as emergencyWarningApi from "@/service/emergencyWarning/index";
import Edit from "@/views/index/index/components/emergency/edit.vue";
import NowWarnLevel from "@/views/index/index/components/NowWarnLevel/Index.vue";

const route = useRoute();
const router = useRouter();

const { activeTabMenu } = storeToRefs(useHomeStore());
const { userInfo } = storeToRefs(useLoginStore());
let keyidEdit = ref("");
const showEdit = ref(false);
const showAddS = ref<boolean>(false);

const scheduleDetial = ref();
const calendarType = ref<string>("week");
const currentDate = ref<string | Dayjs>(dayjs());
const toMoreCalendar = () => {
  router.push({
    path: "/TransitIndex/MyCalender",
    query: {
      _tab: "1",
      label: "我的日程",
    },
  });
};

// 日程数据
const scheduleData = ref<any[]>([]);
const getData = async () => {
  try {
    scheduleData.value = await useCalendarSearch(calendarType.value, currentDate.value);
  } catch (error) {}
};

// 日程新增成功回调
const scheduleSuccess = () => {
  getData();
  scheduleDetial.value.getData();
};

// 进入详情
const goEdit = (keyid?: string) => {
  keyidEdit.value = keyid;
  showEdit.value = true;
};

onMounted(() => {
  getData();
});

watch(
  () => currentDate.value,
  (nval, oval) => {
    getData();
  }
);
</script>

<style lang="scss">
.u-warn-level-card {
  padding: 10px 0 10px 0;
  margin-bottom: 1em;
  height: 143px;
  overflow: hidden;

  .ant-card-body {
    overflow: hidden !important;
  }

  .desc {
    height: 48px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
  }
}
@media screen and (min-height: 768px) {
  .u-index-box-row {
    min-height: 100%;
  }
}
</style>
